<template>
	<view>
		<view class="search-page" v-if="isShow">
			<custom-header title="搜索"></custom-header>

			<!-- 搜索框 -->
			<view class="search-bar">
				<view class="search-left">
					<image src="../../static/images/ic_search_black.png"
						style="height: 32rpx; width: 32rpx; margin-left: 24rpx; margin-right: 8rpx;"></image>
					<input style="flex: 1; background-color: #F7F8FA;" placeholder="请输入需要回收的卡券名称" v-model="searchText" type="text"
						@confirm="onSearch"></input>
					<image src="../../static/images/ic_clear_input.png"
						style="height: 32rpx; width: 32rpx; margin-right: 16rpx;" @click="clearInput"></image>
				</view>

				<view type="primary" class="search-button" @click="onSearch">搜索</view>
			</view>

			<view class="history-container" v-if="historySearch.length">
				<view class="history-title-container">
					<!-- 历史搜索标题 -->
					<view class="history-title">历史搜索</view>
					<!-- 清空历史按钮 -->
					<view class="clear-history">
						<image src="/static/images/ic_detele.png" class="clear-icon" @click="clearHistory"></image>
					</view>
				</view>

				<!-- 历史搜索列表 -->
				<view class="history-list">
					<view class="history-item" v-for="(item, index) in historySearch" :key="index"
						@click="onClickHistory(item)">
						{{ item }}
					</view>
				</view>
			</view>

			<view class="history-container">
				<view class="history-title">热门卡券</view>

				<!-- 热门搜索列表 -->
				<view class="hot-search-list">
					<view class="hot-search-item" v-for="(item, index) in hotSearchItems" :key="index"
						@click="onClickHot(item.name)">
						{{ item.name }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			if (options) {
				console.log("热门", JSON.parse(decodeURIComponent(options.hotCardList)))
				this.hotSearchItems = JSON.parse(decodeURIComponent(options.hotCardList));
			}
		},
		data() {
			return {
				searchText: '',
				historySearch: [],
				hotSearchItems: [],
				isShow: uni.getStorageSync("isShow")
			}
		},
		mounted() {
			// 从本地加载历史搜索
			this.initHistory();
		},
		methods: {
			onSearch() {
				if (this.searchText) {
					console.log(this.searchText);
					//获取重复下标并移除
					const index = this.historySearch.indexOf(this.searchText);
					if (index !== -1) {
						this.historySearch.splice(index, 1);
					}
					//将数据插入
					this.historySearch.unshift(this.searchText);
					// 超过十个移除最早记录
					if (this.historySearch.length > 10) {
						this.historySearch.pop();
					}
					uni.setStorageSync('historySearch', this.historySearch);

					// 跳转到搜索结果页面并传递参数
					uni.navigateTo({
						url: `/pages/search-result/search-result?query=${encodeURIComponent(this.searchText)}`
					});

					this.searchText = '';
				}
			},
			clearInput() {
				this.searchText = '';
			},
			clearHistory() {
				this.historySearch = [];
				// 清除本地存储
				uni.removeStorageSync('historySearch');
			},
			initHistory() {
				// 从本地加载历史搜索
				const storedHistory = uni.getStorageSync('historySearch');
				if (storedHistory) {
					console.log(storedHistory);
					this.historySearch = storedHistory;
				}
			},
			onClickHistory(history) {
				this.searchText = history
				this.onSearch()
			},
			onClickHot(hot) {
				this.searchText = hot
				this.onSearch()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-page {}

	.search-bar {
		padding: 16rpx 32rpx;
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;

		.search-left {
			flex: 1;
			height: 72rpx;
			display: flex;
			align-items: center;
			background-color: #F7F8FA;
			border-radius: 36rpx;
		}

		.search-button {
			margin-left: 16rpx;
			font-size: 32rpx;
			color: #323233;
		}
	}

	.history-container {
		margin-bottom: 40rpx;
		padding: 0 32rpx;

		.history-title-container {
			display: flex;
			justify-content: space-between;
			align-items: center;


			.clear-history {
				display: flex;
				justify-content: flex-end;

				.clear-icon {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

	}

	.history-title,
	.hot-search-title {
		font-size: 28rpx;
		color: #000;
		font-weight: 700;
	}

	.history-list,
	.hot-search-list {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}

	.history-item,
	.hot-search-item {
		display: flex;
		align-items: center;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		padding: 4rpx 34rpx;
		border-radius: 24rpx;
		border: #323233 solid 2rpx;
	}
</style>